<template>
    <div>
        <header>
            <div>
                <!-- 导航 -->
                <Headers @leftClick="lk"  @rightClick="searchClick"></Headers>
            </div>
        </header>
        <main>
            <div>
        <Swiper
        :widthProp="100"
        :heightProp="40"
        unit="vw"
        :clientWidth="clientWidth"
        ></Swiper>
            </div>
            <div>
                <!-- 新品上市 -->
                <product></product>
            </div>
            <div class="favorable">
                <!-- 优惠推荐 -->
                <div class="favorable-nei">
                    <div><div class="favorable-shu"></div><span class="bing">优惠推荐</span></div>
                    <a class="a" href="#">更多</a>
                </div>
                <div class="xianwai">
                    <div class="xian"></div>
                </div>
                <img class="img" src="/img/main-img/资源12.png">
                <!-- <p>{{bnt}}</p> -->
            </div>
            <div class="favorable">
                <!-- 人气推荐 -->
                <div class="favorable-nei">
                    <div><div class="favorable-shu"></div><span class="bing">人气推荐</span></div>
                    <a class="a" href="#">更多</a>
                </div>
                <div class="xianwai">
                    <div class="xian"></div>
                </div>  
                <div class="fruits">
                    <Fruits v-for="i in 6" :key="i"></Fruits>
                </div>              
            </div>
        </main>
        <footer>
            <div class="favorable">
                <!-- 必吃榜单 -->
                <div class="favorable-nei">
                    <div><div class="favorable-shu"></div><span class="bing">必吃榜单</span></div>
                    <a class="a" href="#">更多</a>
                </div>
                <div class="xianwai">
                    <div class="xian"></div>
                </div>
                <eat v-for="(s,i) in 3" :key="i"></eat>
            </div>
        </footer>
    </div>
</template>

<script>
// import {mapState} from "vuex";
import Swiper from "../compontents/Swiper.vue";
import product from "../compontents/product.vue";
import Headers from "../compontents/Headers.vue";
import eat from "../compontents/eat.vue";
import Fruits from "../compontents/Fruits.vue"

export default {
    data(){
        return{

        }
    },
    components:{
        Swiper,
        product,
        Headers,
        eat,
        Fruits
    },
    computed:{
        // ...mapState(["bnt"]),
        clientWidth(){ 
        return window.screen.width;
        }
    },
    methods:{
         searchClick(){
            this.$router.push('/home/search');
        },
        lk(){
            this.$router.push('/home/xiao');
        }
    },
}
</script>


<style scoped>
    body{
        overflow: scroll;
    }
    .favorable{
        margin-top: 5vw;
    }
    .favorable-nei{
        display: flex;
        justify-content: space-between;
        padding: 0 8vw;
        line-height: 10vw;
    }
    .favorable-shu{
        width: 13vw;
        /*height: 10vw; */
        border: 0.8vw solid #40e2ff;
        border-radius: 0.8vw;
        transform: rotate(90deg);
        position: relative;
        left: -10vw;
        top: 6vw;
    }
    .bing{
        color: rgb(77, 77, 77);
        font-size: 6.6vw;
    }
    .a{
        color: rgb(179, 179, 179);
        font-size: 5vw;
        line-height: 13vw;
    }
    .xianwai{
        width: 100%;
    }
    .xian{
        width: 90%;
        margin: 0 auto;
        margin-top: 2vw;
        border: 1px solid rgb(242, 242, 242);
    }
    .img{
        margin-top: 3vw;
        width: 100vw;
        height: 40vw;
    }
    .fruits{
        padding:2vw 4vw 0 4vw ;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
</style>